<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible">
    
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
    <el-divider content-position="left">基本信息</el-divider>
    <el-form-item label="所属分类" prop="catId">
      <!-- <el-input v-model="dataForm.catId" placeholder="所属分类"></el-input> -->
      <div><div><span>{{dataForm.catId}}</span></div></div>
    </el-form-item>
    <el-form-item label="标题" prop="infoTitle">
      <el-input v-model="dataForm.infoTitle" placeholder="标题"></el-input>
    </el-form-item>
    <el-form-item label="信息状态" prop="infoStatus">
      <div><div><span>{{infoStatusInfo}}</span></div></div>
    </el-form-item>
    <el-form-item label="上传者" prop="nickName">
      <div><div><span>{{dataForm.nickName}}</span></div></div>
    </el-form-item>
    <el-form-item label="创建时间" prop="createTime">
      <div><div><span>{{dataForm.createTime}}</span></div></div>
    </el-form-item>

    <el-divider content-position="left">属性信息</el-divider>
    <!-- <el-form-item label="创建时间" prop="createTime">
      <el-input v-model="dataForm.createTime" placeholder="创建时间"></el-input>
    </el-form-item> -->
    <com-info-attr-template  :info_attr="info_attr"></com-info-attr-template>
    
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  // import attrVue from '../../modules/info/attr.vue'
  import comInfoAttrTemplate from '../common/com-info-attr-template'
  export default {
    components:{
      comInfoAttrTemplate,
    },
    computed:{
      // 文字版 信息状态
      infoStatusInfo: function(){
        // [0-待,1-审核,2-成功,-1-删,-2-失败]
        var _status  = this.dataForm.infoStatus
        var _info = ''
        if(_status === 1){
          _info = '待审核'
        }else if(_status === 2){
          _info = '审核通过'
        }else if(_status === -2){
          _info = '审核不通过'
        }else if(_status === -1){
          _info = '已删除'
        }
        return _info
      },
      // 信息属性，用于前端展示
      info_attr: function(){
        var _arr = this.dataForm.infoAttrValueVos
        var _img = this.dataForm.img
        if( _img && _img.length > 0){
          var attrValue = ''
          for(var i = 0;i<_img.length;i++){
            if(i === _img.length - 1){
              attrValue += _img[i]
            }else{
              attrValue += _img[i] + ';'
            }
          }
          _arr.push({
            attrName:'图片',
            type:'upload',
            attrValue: attrValue,
          })
        }
        
        return _arr
      },
      // 信息属性：提交给后端
      info_attr_value: function(){
        var _value = [];
        var _attr = this.info_attr
        for(var i = 0;i<_attr.length;i++){
          if(_attr[i].type === 'upload'){
            _value.push({ type: _attr[i].type, attrValue: _attr[i].attrValue})
          }else{
            _value.push({ valId: _attr[i].valId, attrValue: _attr[i].attrValue})
          }
        }
        return _value
      },
    },
    data () {
      return {
        visible: false,
        dataForm: {
          infoId: 0,
          catId: 8,
          infoTitle: '丢失校园卡',
          infoDefaultImg: '',
          infoStatus: 1,
          anon: 0,
          createTime: '2021/05/02 20:07:08',
          commentNum: 6,
          img:[],
          infoAttrValueVos:[],
          userId: '',
          nickName:'老张11',
          portrait:'',
        },
        dataRule: {
          catId: [
            { required: true, message: '所属分类不能为空', trigger: 'blur' }
          ],
        }
      }
    },
    methods: {
      // 初始化，获取信息，填充表单
      init (id) {
        this.dataForm.infoId = id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.infoId) {
            this.$http1({
              url: this.$http.adornUrl(`/user/info/info/${this.dataForm.infoId}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                console.log("获取一个信息", data.info)
                // return;
                this.dataForm = data.info;
              }
            })
          }
        })
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            var data = {
              infoId: this.dataForm.infoId,
              infoTitle: this.dataForm.infoTitle,
              infoAttrValueVos: this.info_attr_value,
            }
            console.log("提交修改请求", data)
            // return
            this.$http1({
              url: this.$http.adornUrl(`/admin/info/${!this.dataForm.infoId ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData(data)
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>
